/*
 * Wire
 * Copyright (C) 2018 Wire Swiss GmbH
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see http://www.gnu.org/licenses/.
 *
 */

// ----------------------------------------------------------------------------
// Local Emoji Font
// ----------------------------------------------------------------------------
@font-face {
  font-family: emoji;
  src: local('Apple Color Emoji'), local('Segoe UI Emoji'), local('Android Emoji'), local('Noto Color Emoji'),
    local('Emoji One'), local('Twemoji');

  // Define a whitelist of glyphs to render with emoji font according to standard.
  // http://unicode.org/Public/emoji/5.0/emoji-data.txt
  //
  // This list is constructed as following:
  // 1. Download the list using the link above.
  // 2. Remove comments and everything after semicolor on every line.
  // 3. Sort and remove duplicate lines.
  // 4. Remove the following lines (they are better off rendered with a text font):
  //    - 0023        (#)
  //    - 002A        (*)
  //    - 0030..0039  (0-9)
  //    - 00A9        (©)
  //    - 00AE        (®)
  //    - 2122        (™)
  // 5. Replace all occurrences of `..` with `-`.
  // 6. Prepend each line with `U+`.
  // 7. Join all lines with comma.
  // 8. Prepend the list with `U+200D` (zero width joiner) and `U+FE0F` (marker telling to render glyph as emoji).
  // prettier-ignore
  unicode-range: U+200d, U+FE0F, U+1f004, U+1f0cf, U+1f170-1f171, U+1f17e, U+1f17f, U+1f18e, U+1f191-1f19a,
    U+1f1e6-1f1ff, U+1f201, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f236, U+1f232-1f23a, U+1f238-1f23a, U+1f250-1f251,
    U+1f300-1f320, U+1f321, U+1f324-1f32c, U+1f32d-1f32f, U+1f330-1f335, U+1f336, U+1f337-1f37c, U+1f37d, U+1f37e-1f37f,
    U+1f380-1f393, U+1f385, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a0-1f3c4, U+1f3c2-1f3c4, U+1f3c5,
    U+1f3c6-1f3ca, U+1f3c7, U+1f3ca, U+1f3cb-1f3cc, U+1f3cb-1f3ce, U+1f3cf-1f3d3, U+1f3d4-1f3df, U+1f3e0-1f3f0,
    U+1f3f3-1f3f5, U+1f3f4, U+1f3f7, U+1f3f8-1f3ff, U+1f3fb-1f3ff, U+1f400-1f43e, U+1f43f, U+1f440, U+1f441,
    U+1f442-1f443, U+1f442-1f4f7, U+1f446-1f450, U+1f466-1f469, U+1f46e, U+1f470-1f478, U+1f47c, U+1f481-1f483,
    U+1f485-1f487, U+1f4aa, U+1f4f8, U+1f4f9-1f4fc, U+1f4fd, U+1f4ff, U+1f500-1f53d, U+1f549-1f54a, U+1f54b-1f54e,
    U+1f550-1f567, U+1f56f-1f570, U+1f573-1f579, U+1f574-1f575, U+1f57a, U+1f587, U+1f58a-1f58d, U+1f590, U+1f595-1f596,
    U+1f5a4, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5bc, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5e3,
    U+1f5e8, U+1f5ef, U+1f5f3, U+1f5fa, U+1f5fb-1f5ff, U+1f600, U+1f601-1f610, U+1f611, U+1f612-1f614, U+1f615, U+1f616,
    U+1f617, U+1f618, U+1f619, U+1f61a, U+1f61b, U+1f61c-1f61e, U+1f61f, U+1f620-1f625, U+1f626-1f627, U+1f628-1f62b,
    U+1f62c, U+1f62d, U+1f62e-1f62f, U+1f630-1f633, U+1f634, U+1f635-1f640, U+1f641-1f642, U+1f643-1f644, U+1f645-1f647,
    U+1f645-1f64f, U+1f64b-1f64f, U+1f680-1f6c5, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cb-1f6cf, U+1f6cc, U+1f6d0,
    U+1f6d1-1f6d2, U+1f6e0-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f0, U+1f6f3, U+1f6f4-1f6f6, U+1f6f7-1f6f8, U+1f910-1f918,
    U+1f918, U+1f919-1f91c, U+1f919-1f91e, U+1f91e, U+1f91f, U+1f920-1f927, U+1f926, U+1f928-1f92f, U+1f930,
    U+1f931-1f932, U+1f933-1f939, U+1f933-1f93a, U+1f93c-1f93e, U+1f93d-1f93e, U+1f940-1f945, U+1f947-1f94b, U+1f94c,
    U+1f950-1f95e, U+1f95f-1f96b, U+1f980-1f984, U+1f985-1f991, U+1f992-1f997, U+1f9c0, U+1f9d0-1f9e6, U+1f9d1-1f9dd,
    U+203c, U+2049, U+2139, U+2194-2199, U+21a9-21aa, U+231a-231b, U+2328, U+23cf, U+23e9-23ec, U+23e9-23f3, U+23f0,
    U+23f3, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+25fd-25fe, U+2600-2604, U+260e, U+2611,
    U+2614-2615, U+2618, U+261d, U+2620, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638-263a, U+2640, U+2642,
    U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267f, U+2692-2697, U+2693, U+2699, U+269b-269c,
    U+26a0-26a1, U+26a1, U+26aa-26ab, U+26b0-26b1, U+26bd-26be, U+26c4-26c5, U+26c8, U+26ce, U+26cf, U+26d1, U+26d3-26d4,
    U+26d4, U+26e9-26ea, U+26ea, U+26f0-26f5, U+26f2-26f3, U+26f5, U+26f7-26fa, U+26f9, U+26fa, U+26fd, U+2702, U+2705,
    U+2708-2709, U+270a-270b, U+270c-270d, U+270f, U+2712, U+2714, U+2716, U+271d, U+2721, U+2728, U+2733-2734, U+2744,
    U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2763-2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935,
    U+2b05-2b07, U+2b1b-2b1c, U+2b50, U+2b55, U+3030, U+303d, U+3297, U+3299;
}

// ----------------------------------------------------------------------------
// Font
// ----------------------------------------------------------------------------
@ars-font-path: '../font/';

@font-family-base: emoji, BlinkMacSystemFont, -apple-system, Helvetica Neue, Arial, sans-serif;
@font-family-ephemeral: Redacted Script;

@font-size-xxs: 8px;
@font-size-xs: 11px;
@font-size-sm: 16px;
@font-size-md: 20px;
@font-size-lg: 24px;
@font-size-xl: 32px;
@font-size-xxl: 56px;

@line-height-xs: 11px;
@line-height-sm: 16px;
@line-height-md: 20px;
@line-height-lg: 24px;
@line-height-xl: 32px;
@line-height-xxl: 64px;

@font-weight-bold: 600;
@font-weight-regular: 400; // font-weight-xs should this this
@font-weight-light: 300;

// ----------------------------------------------------------------------------
// Icons
// ----------------------------------------------------------------------------
@icon-size-sm: 16px;
@icon-size-md: 32px;
@icon-size-lg: 56px;

// ----------------------------------------------------------------------------
// Dot sizes
// ----------------------------------------------------------------------------
@dot-xs: 4px;
@dot-sm: 6px;
@dot-md: 8px;
@dot-lg: 10px;
@dot-xl: 12px;

// ----------------------------------------------------------------------------
// Common Colors
// ----------------------------------------------------------------------------
@graphite-dark: #323639;
@graphite: #8d989f;

// use for seperator and icon surrounds on white background
@seperator-color: fade(@graphite, 24%);

// ----------------------------------------------------------------------------
// Buttons
// ----------------------------------------------------------------------------
@button-border-radius: 4px;
@button-border-size: 1px;

@button-height: 40px;
@button-width: 192px;

@button-medium-height: 32px;
@button-medium-sm-height: 28px;
@button-medium-width: 108px;

@button-round-size: 28px;
@button-round-size-xs: 28px;
@button-round-size-sm: 32px;
@button-round-size-md: 40px;
@button-round-size-lg: 64px;
@button-round-size-xl: 72px;

// ----------------------------------------------------------------------------
// Framework
// ----------------------------------------------------------------------------
@app-bg: #fafafa;

@teams-width: 78px;

@left-bg: #1f1f1f;
@left-color: #fff;
@left-width: 304px;
@right-width: 304px;

// ----------------------------------------------------------------------------
// Left list
// ----------------------------------------------------------------------------
@left-list-width: @left-width;
@left-list-header-height: 40px;
@left-list-item-height: 48px;
@left-list-item-left-width: 60px;
@left-list-item-right-width: 56px;
@left-list-controls-width: 104px;

// ----------------------------------------------------------------------------
// Conversation
// ----------------------------------------------------------------------------
@conversation-max-width: 800px;

@conversation-message-max-width: 640px;
@conversation-message-sender-width: 72px;
@conversation-message-timestamp-width: 96px;

// ----------------------------------------------------------------------------
// Conversation Input
// ----------------------------------------------------------------------------
@conversation-input-min-height: 56px;
@conversation-input-max-height: 200px;
@conversation-input-line-height: @line-height-lg;
@conversation-input-separator-color: fade(@w-gray, 56%);

// ----------------------------------------------------------------------------
// Content Title Bar
// ----------------------------------------------------------------------------
@content-title-bar-height: 40px;

// ----------------------------------------------------------------------------
// Z-Indexes
// ----------------------------------------------------------------------------
@z-index-level-0: 0;
@z-index-level-1: 10;
@z-index-level-2: 100;
@z-index-level-3: 1000;
@z-index-level-4: 10000;
@z-index-level-5: 100000;
@z-index-level-6: 1000000;
@z-index-level-7: 10000000;

@z-index-badge: @z-index-level-2;
@z-index-panel: @z-index-level-3;
@z-index-bubble: @z-index-level-3;
@z-index-modal: @z-index-level-4;
@z-index-context: @z-index-level-7;
@z-index-warnings: @z-index-level-7;

// ----------------------------------------------------------------------------
// Modal
// ----------------------------------------------------------------------------
@modal-padding: 24px;

// ----------------------------------------------------------------------------
// Avatar
// ---------------------------------------------------------------------------
@avatar-diameter-xl: 200px;
@avatar-initials-xl: @font-size-xl;

@avatar-diameter-l: 72px;
@avatar-initials-l: @font-size-lg;

@avatar-diameter-m: 40px;
@avatar-initials-m: @font-size-sm;

@avatar-diameter-s: 28px;
@avatar-initials-s: @font-size-xs;

@avatar-diameter-xs: 24px;
@avatar-initials-xs: @font-size-xs;

@avatar-diameter-xxs: 20px;
@avatar-initials-xxs: @font-size-xs;

// ----------------------------------------------------------------------------
// Bubble
// ----------------------------------------------------------------------------
@bubble-width: 306px;
@bubble-height: 440px;
@bubble-footer-height: 56px;
@bubble-border-radius: 4px;

@bubble-inner-padding: 24px;
@bubble-image-margin: 2px;

@bubble-transition_offset: 100%;

// ----------------------------------------------------------------------------
// Media queries breakpoints
// ----------------------------------------------------------------------------
@screen-sm: 480px;
@screen-md-min: 768px;
@screen-lg-min: 1312px;

// So media queries don't overlap when required, provide a maximum
@screen-sm-max: @screen-md-min - 1;
@screen-md-max: @screen-lg-min - 1;

// ----------------------------------------------------------------------------
// Warnings
// ----------------------------------------------------------------------------
@warning-bar-feature-height: 64px;
@warning-bar-connection-height: 32px;

// ----------------------------------------------------------------------------
// Animations
// ----------------------------------------------------------------------------

// for slower animation use n * slower
@animation-timing-faster: 0.15s;
@animation-timing-fast: 0.35s;
@animation-timing-slow: 0.55s;
@animation-timing-slower: 0.7s;

// easing functions
@ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
@ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-expo: cubic-bezier(0.6, 0.04, 0.98, 0.335);
@ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
@ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
@ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
@ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
@ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
@ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);

// start ui
@start-ui-search-bar-offset: 88px;
